<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>vue-tabber demo - controlled active position</title>
	<link rel="stylesheet" type="text/css" href="../dist/theme/gray.css"/>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>

	<script type="text/javascript" src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../dist/vue-tabber.js"></script>

<script type="text/x-template" id="template">
	<tab
		:activePosition="activePosition"
		@updateActivePosition="onUpdateActivePosition"
		@switching="onSwitching"
		@switched="onSwitched"
	>
		<tab-label key="item-1">title 1</tab-label>
		<tab-panel>content 1</tab-panel>

		<tab-label key="item-2">title 2</tab-label>
		<tab-panel>content 2</tab-panel>

		<tab-label key="item-3">title 3</tab-label>
		<tab-panel>content 3</tab-panel>

		<tab-label key="item-4">title 4</tab-label>
		<tab-panel>content 4</tab-panel>
	</tab>
</script>

<script type="text/javascript">
	Vue.createApp({
		components: {
			Tab: VueTabber,
			TabLabel: VueTabber.Label,
			TabPanel: VueTabber.Panel
		},
		template: '#template',
		data: function () {
			return {
				activePosition: 0
			};
		},
		methods: {
			onUpdateActivePosition({index, key}) {
				const message = `Switch to index: ${index} (key: ${key})?`;
				if (confirm(message)) {
					this.activePosition = index;
				}
			},
			onSwitching(from, to) {
				console.log('switching', from, to);
			},
			onSwitched(from, to) {
				console.log('switched', from, to);
			}

		}
	}).mount('#app');
</script>
</body>
</html>
